<template>
  <view class="wecat-info">
    <view class="qr-container">
      <up-qrcode :size="80" val="uview-plus"></up-qrcode>
    </view>
    <view class="info-text">
      <text>{{ title || '公众号/公司名称' }}</text>
      <text class="sub-text">{{ subTitle || '保存到手机，微信扫一扫关注我们，了解取更多信息' }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">

const props = defineProps({
  qrCodeUrl: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  subTitle: {
    type: String,
    default: ''
  }
});

// 预览二维码
const previewQRCode = () => {
  if (!props.qrCodeUrl) return;
  uni.previewImage({
    urls: [props.qrCodeUrl]
  });
};

// 保存二维码到相册
const saveQRCode = () => {
  if (!props.qrCodeUrl) {
    uni.showToast({
      title: '二维码不存在',
      icon: 'none'
    });
    return;
  }

  uni.downloadFile({
    url: props.qrCodeUrl,
    success: (res) => {
      uni.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: () => {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });
        },
        fail: () => {
          uni.showToast({
            title: '保存失败，请检查权限',
            icon: 'none'
          });
        }
      });
    },
    fail: () => {
      uni.showToast({
        title: '下载失败',
        icon: 'none'
      });
    }
  });
};
</script>

<style scoped lang="scss">
.wecat-info {
  display: flex;
  align-items: center;
  background-color: #e0efff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin: 20rpx;
  
  .qr-container {
    display: flex;
    justify-content: center;
    background-color: white;
    border-radius: 12rpx;
    padding: 15rpx;
    
    .qr-code {
      width: 300rpx;
      height: 300rpx;
      border-radius: 8rpx;
    }
  }
  
  .info-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: space-between;
    padding: 20rpx;
    
    text {
      display: block;
      line-height: 1.5;
      
      &.sub-text {
        font-size: 24rpx;
        color: #666;
        margin-top: 10rpx;
      }
    }
  }
  
  .action-btn {
    display: flex;
    justify-content: center;
    
    :deep(.u-button) {
      min-width: 240rpx;
    }
  }
}
</style>
